
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>快速注册</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.md5.js"></script>
    <link href="${pageContext.request.contextPath}/css/login/register.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jsencrypt/bin/jsencrypt.min.js"></script>
    <style>
        .username-msg,.userTel-msg,.password-msg{
            font-size: 10px;
            color: red;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="login-wrap">
        <div id="signin" class="rl-modal">
            <div class="rl-modal-header">
                <h1>
                    <span class="active-title">快速注册</span>
                </h1>
                <span style="font-size: 10px;color: red">${loginMsg}</span>
            </div>

            <div class="rl-modal-body js-loginWarp">
                <div class="clearfix">
                    <form id="signup-from" action="${pageContext.request.contextPath}/consumer" method="post"class="form1">

                        <div class="rlf-group pr">
                            <input type="text" value maxlength="37" class="ipt username" placeholder="请输入昵称" name="consumerName">
                            <p class="rlf-tip-wrap username-msg"></p>
                        </div>
                        <div class="rlf-group pr">
                            <input type="tel" name="consumerTel" required="required" maxlength="11" class="ipt usertel"
                                    placeholder="请输入手机号" >
                            <p class="rlf-tip-wrap userTel-msg"></p>
                        </div>
                        <div class="rlf-group pr">
                            <input type="hidden" name="consumerPassword" id="password">
                            <input type="password" name="consumerPassword1"id="password1" class="ipt password"
                                    placeholder="请输入密码">
                            <p class="rlf-tip-wrap password-msg"></p>
                        </div>
                        <div class="rlf-group pr">
                            <input type="password" name="consumerPassword2" id="password2" class="ipt password"
                                   onkeyup="validate()"
                                   placeholder="请再次确认密码" maxlength="20">
                            <p class="rlf-tip-wap" id="tishi"></p>
                        </div>
                        <div class="rlf-group clearfix">
                            <input type="button" value="注册"
                                   class="moco-btn moco-btn-red moco-btn-lg btn-full">
                        </div>
                    </form>
                </div>
            </div>



            <div class="rl-model-footer">
                <div class="pop-login-signup-box clearfix">
                    <span class="xa-showSignup"><a href="login.jsp"style="list-style: none;text-decoration:none;">返回账号登录</a></span>
                </div>
            </div>

        </div>
    </div>
</div>



<%--<script src="${pageContext.request.contextPath}/js/login/register.js"></script>--%>
<script>

    // /!*=========================表单验证==============================*!/
    //验证用户名
    document.querySelector(".username").onblur = checkUsername;
    function  checkUsername(){
        //（1）获得用户名
        var username = document.querySelector(".username").value;
        console.log("用户名：" + username);

        //(2)用户名是否合格
        if(username == "" || username == null){// 是否为空
            //(3)消息提示
            document.querySelector(".username-msg").innerText = "用户名不能为空";
            return false;
        }else if( !/^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(username) ){ //
            document.querySelector(".username-msg").innerText = "昵称只含有汉字、数字、字母、下划线不能以下划线开头和结尾";
            return false;
        }else{
            document.querySelector(".username-msg").innerText = "";
            return true;
        }

    }
    //验证手机号码
    document.querySelector(".usertel").onblur = checkUserTel;
    function  checkUserTel(){
        var userTel = document.querySelector(".userTel").value;
        if(userTel == "" || userTel == null){// 是否为空
            //(3)消息提示
            document.querySelector(".userTel-msg").innerText = "手机号码不能为空";
            return false;
        }else if( !/^(0|86|17951)?1[0-9]{10}$/.test(userTel) ){
            document.querySelector(".userTel-msg").innerText = "不是有效的手机号码";
            return false;
        }else{
            document.querySelector(".userTel-msg").innerText = "";
            return true;
        }
    }
    //验证密码
    document.querySelector(".password").onblur = checkPassword;
    function  checkPassword(){
        var password = document.querySelector(".password").value;
        if(password == "" || password == null){// 是否为空
            //(3)消息提示
            document.querySelector(".password-msg").innerText = "密码不能为空";
            return false;
        }else if( !/^[a-zA-Z0-9]\w{5,19}$/.test(password) ){
            document.querySelector(".password-msg").innerText = "密码只能由6~20字母数字或下划线";
            return false;
        }else{
            document.querySelector(".password-msg").innerText = "";
            return true;
        }
    }

    //密码确认
    function validate() {
        var password1 = document.getElementById("password1").value;
        var password2 = document.getElementById("password2").value;
        if(password1 == password2) {
            document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
            // document.getElementById("submit").disabled = false;
            return true;
        }
        else {
            document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
            // document.getElementById("submit").disabled = true;
            return false;
        }
    }

    var PUBLIC_KEY = '';
    $(".moco-btn").click(function () {
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/publickey",
            dataType: 'json',
            success: function (result) {
                PUBLIC_KEY = result.data; //获取公钥

                var encrypt = new JSEncrypt()
                encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
                var password = $(".password").val();
                var encrypted = encrypt.encrypt(password);
                // $(".password").val(encrypted);
                console.log('公钥:%o', PUBLIC_KEY);
                console.log('密码:%o', password)
                console.log('加密后数据:%o', encrypted);
                $('#password').val(encrypted);

                if (checkUsername() && checkUserTel()  && checkPassword() && validate()) {
                    $("#signup-from").submit();
                };


            }

        });
    });
</script>


</body>
</html>
